<template>
  <div v-loading="loading" class="login-box width-100 h-vh-100 flex row-center col-center over-hidden rela">
    <div class="login-box-one flex-col row-center col-center">
      <el-row class="loginBoc width-100 rela bg-main b-r-rem-10 over-hidden" type="flex" justify="justify">
        <el-col :span="15" class="flex-col row-center col-center">
          <div class="left font-rem-100 cor-FF letter-rem-2 font-weigth-500">demo</div>
        </el-col>
        <el-col :span="9" class="right bg-FF rela flex-col col-center row-center m-rem-l-26">
<!--          二维码登录 -->
<!--          <img v-if="tabAccFlag == true" src="../../assets/images/businessImages/login/code.png" alt=""-->
<!--               class="w-rem-60 h-rem-60 abso pos-rem-t-0 pos-rem-r-0 cursor-pointer" @click="generateQRCode()"-->
<!--          >-->
<!--          <img v-else src="../../assets/images/businessImages/login/accountImg.png" alt=""-->
<!--               class="w-rem-60 h-rem-60 abso pos-rem-t-0 pos-rem-r-0 cursor-pointer" @click="onQRcodeFlag()"-->
<!--          >-->
          <!-- 账户、验证码登录 -->
          <div v-if="tabAccFlag == true">
            <div class="zjm_tabsStyle_login width-100 flex row-center col-center">
              <div v-for="(item,index) in tabDataTwo" :key="index" type="text" class="tabTwo text-center"
                   :class="[index == tabActiveTwo ? 'font-weight-600 cor-main bor-main-b-solid-4':'']"
                   @click="handleClick(index,item.value,item.ref)"
              >
                <div>{{ item.label }}</div>
              </div>
            </div>

            <accountLogin v-if="tabActiveTwoRef == 'accountLogin'" ref="accountLogin"/>
            <codeLogin v-if="tabActiveTwoRef == 'codeLogin'" ref="codeLogin"/>
          </div>

          <!-- 二维码登录 -->
          <div v-else>
            <div class="rela w-rem-220 h-rem-220">
              <canvas ref="qrcodeCanvas" style="width:22rem!important;height:22rem!important;"></canvas>
              <div v-if="codeFlag"
                   class="w-rem-220 h-rem-220 bg-alp-00-70 abso pos-0 flex-col row-center col-center z-999"
              >
                <div class="font-rem-15 cor-FF ">二维码已失效，请
                  <span class="cor-main cursor-pointer font-weight-bold letter-rem-2"
                        @click="onRefresh()"
                  >刷新</span>
                </div>
              </div>
            </div>
            <div class="font-rem-15 cor-66 text-center cursor-pointer" :class="codeFlag == true ?'m-rem-t-16':''"
                 @click="onQRcodeFlag()"
            >
              请打开<span style="color:red">合财通APP</span>
            </div>
            <div class="font-rem-15 cor-66 text-center m-rem-t-5">
              扫描二维码进行登录
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
// 二维码登录
// import QRCode from 'qrcode'

// Api
import { methodGetApi } from '@/api/publicApi'

// 组件
import accountLogin from './components/accountLogin' // 账户登录
import codeLogin from './components/codeLogin' // 验证码登录

// js
// import setMessage from '@/utils/publicUtils/message'

export default {
  name: 'Login',
  components: { accountLogin, codeLogin },
  provide() {
    return {
      login: this
    }
  },
  data() {
    return {
      // loading 加载
      loading: false,

      // 是否账户登录
      tabAccFlag: true,
      // 码
      qrCode: null,
      // 是否 失效
      codeFlag: false,
      // 失效 定时器
      timerMinute: null,
      // 两种失效
      timerMinuteNum: 120,
      // 轮询 定时
      timer: null,

      // tab 选中值 选择登录方式 选中值
      tabActiveTwo: 0,
      tabActiveTwoValue: null,
      // tabActiveTwoRef =  用账户密码登录 accountLogin  、 用手机号验证登录 = codeLogin
      tabActiveTwoRef: 'accountLogin',

      tabDataTwo: [
        //   用账户密码登录 打开账户登录
        { value: '00', label: '账户登录', ref: 'accountLogin' },
        //   用手机号验证登录 打开验证码登录
        // { value: '01', label: '验证码登录', ref: 'codeLogin' }
      ]
    }
  },
  mounted() {
  },
  created() {
    localStorage.removeItem('tenantId')
    clearInterval(this.timerMinute)
    clearInterval(this.timer)
    // --------
    // var tabAccFlag = localStorage.getItem('tabAccFlag')
    // console.log(tabAccFlag)
    // if (tabAccFlag == 'false') {
    //   this.tabAccFlag = false
    //   this.generationQRCode()
    // } else {
    //   clearInterval(this.timerMinute)
    //   clearInterval(this.timer)
    // }
  },
  destroyed() {
    clearInterval(this.timerMinute)
    clearInterval(this.timer)
  },

  methods: {
    /**
     * @description: tab 一 调取
     * @author: 张佳敏
     * @return {*}
     */
    addTabClick(index, value) {
      this.tabActive = index
      this.tabActiveValue = value
      this.onHandle()
    },

    /**
     * @description: tab 二 调取
     * @author: 张佳敏
     * @return {*}
     */
    handleClick(index, value, ref) {
      this.tabActiveTwo = index
      this.tabActiveTwoValue = value
      this.tabActiveTwoRef = ref
      this.onHandle()
    },

    /**
     * @description: 操作
     * @author: 张佳敏
     * @return {*}
     */
    onHandle() {
      this.$nextTick(() => {
        this.$refs[this.tabActiveTwoRef].loginType = this.tabActiveValue
        this.$refs[this.tabActiveTwoRef].loginTypeOne = this.tabActiveTwoValue
      })
    },

    /**
     * @description: 切换二维码登录
     * @author: 张佳敏
     * @return {*}
     */
    generateQRCode() {
      this.tabAccFlag = !this.tabAccFlag
      // localStorage.setItem('tabAccFlag', this.tabAccFlag)
      this.generationQRCode()
    },

    /**
     * @description: 切换账户登录
     * @author: 张佳敏
     * @return {*}
     */
    onQRcodeFlag() {
      this.tabAccFlag = !this.tabAccFlag
      // localStorage.setItem('tabAccFlag', this.tabAccFlag)
      clearInterval(this.timerMinute)
      clearInterval(this.timer)
    },

    /**
     * @description: 刷新 二维码
     * @author: 张佳敏
     * @return {*}
     */
    onRefresh() {
      this.codeFlag = false
      this.generationQRCode()
    },

    /**
     * @description: 生成二维码
     * @author: 张佳敏
     * @return {*}
     */
    generationQRCode() {
      methodGetApi('/generationQRCode').then(res => {
        const canvas = this.$refs.qrcodeCanvas
        this.qrCode = res.data
        this.$qrcode.toCanvas(canvas, res.data, error => {
          canvas.style.width = '22rem'
          canvas.style.height = '22rem'
          if (error) console.error(error)
          // 两分钟的 失效
          this.timerMinute = setInterval(() => {
            if (this.timerMinuteNum <= 0) {
              this.timerMinuteNum = 120
              clearInterval(this.timerMinute)
              clearInterval(this.timer)
              this.codeFlag = true
            } else {
              this.timerMinuteNum--
            }
          }, 1000)

          // 轮询 查询app是否扫码登录
          this.timer = setInterval(() => {
            this.scanLogin()
          }, 10000)
        })
      })
    },

    /**
     * @description: 二维码登录
     * @author: 张佳敏
     * @return {*}
     */
    scanLogin() {
      // this.loading = true
      this.$store.dispatch('user/qrCodelogin', { qrCodeUUid: this.qrCode }).then(() => {
        console.log()
        // this.saveLogin() // 保存登录信息
        // setMessage()
        // sunbin update 2021/10/15 16:48 防止路劲访问回到之前路径地址
        // this.redirect 历史路径
        // this.$router.push({ path: this.redirect || '/' })
        // this.$router.push({ path: '/' })
        // 时间 ：2022/11/18  张佳敏 修改 跳转地址
        clearInterval(this.timerMinute)
        clearInterval(this.timer)
        this.$router.push({ path: '/' })
      }).catch((err) => {
        console.log(err)
        // this.loading = false
      })
    },

    // 保存账户
    saveLogin() {
      if (this.save) {
        const neeForm = {
          username: this.form.username,
          password: this.form.password
        }
        localStorage.setItem('login', JSON.stringify(neeForm))
      } else {
        localStorage.removeItem('login')
      }
    }
  }
}
</script>
<style lang="scss">
.login-box {
  background: #F6F6F6;
  .login-box-one {
    width: 100%;
    height: 100%;
    border-radius: 1.6rem;
    background: url('~@/assets/images/businessImages/login/bg.png') no-repeat 0rem bottom;
    background-size: 100%;

    .loginBoc {
      width: 90rem;
      min-height: 36.8rem;
      padding: 4.6rem 4.6rem 0rem 0rem;
      box-shadow: 0 0.2rem 2.8rem 0 rgba(0, 0, 0, 0.16);

      .left {
        padding: 0rem 0rem 4.6rem 4.6rem;
      }

      .right {
        height: 40.6rem;
        padding: 3.6rem 2.4rem;
        border-radius: 0.8rem;
        background-size: 100% 100%;
        margin-bottom: 4.6rem;

        .zjm_tabsStyle_login {
          height: 3.6rem;
          padding: 0rem 0.5rem;

          .tabTwo {
            height: 3.6rem;
            font-size: 1.6rem;
            padding: 0rem 2rem;
            margin: 0rem 0.5rem;
            white-space: nowrap;
          }

          .active {
            font-weight: 600;
            color: #0091FF;
            border-bottom: 0.2rem solid #0091FF;
          }
        }
      }
    }
  }

  .copyright-box{
    a { color: #24292e !important; }
    a:hover { color: #0366d6 !important; }
  }
}
</style>
